﻿@model SMECustomerWebsite.Models.ViewModels.ReduceRateFee.CustomerInfoViewModel
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_title">
                <h2>Customer Detail</h2>
                <ul class="nav navbar-right panel_toolbox">
                    <li>
                        <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    </li>
                </ul>
                <div class="clearfix"></div>
            </div>
            <div class="x_content">
                @if (!string.IsNullOrEmpty(Request.QueryString["cif"]))
                {
                    <div class="col-md-4 col-sm-4 col-xs-12 profile_left">
                        @Html.Action("CustomerInfo", "CustomerDetail", new { cif = Model.Customer.custInfo.Cif })
                        @Html.Action("CustomerAlert", "CustomerDetail", new { cif = Model.Customer.custInfo.Cif })
                    </div>
                    <div class="col-md-8 col-sm-8 col-xs-12">
                        @if (Model.Customer.custToiInfo != null)
                        {
                            <div class="x_panel">
                                <div class="x_title">
                                    <h2>Lợi nhuận khách hàng</h2>
                                    <ul class="nav navbar-right panel_toolbox">
                                        <li>
                                            <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                                        </li>
                                    </ul>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="x_content">
                                    <div id="toi_graph_bar" style="width:100%; height:280px;"></div>
                                </div>
                            </div>
                        }
                        <ul id="myTab" class="nav nav-tabs bar_tabs sme-tabs" role="tablist">
                            <li role="presentation" class="active">
                                <a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">Cross Selling</a>
                            </li>
                            <li role="presentation" class="">
                                <a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">Upsell</a>
                            </li>
                            <li role="presentation" class="">
                                <a href="#tab_content3" role="tab" id="profile-tab2" data-toggle="tab" aria-expanded="false">Product holding</a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
                                @Html.Action("CustomerXSelling", "CustomerDetail", new { cif = Model.Customer.custInfo.Cif })
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
                            </div>
                            <div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">

                            </div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="x_content form-horizontal form-label-left">
                        <div class="form-group">
                            <label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">
                                @SMECustomerWebsite.Core.Resources.Resource.CifHeader<span class="required">*</span>
                            </label>
                            <div class="col-md-6 col-sm-6 col-xs-12">

                                <select class="form-control" id="custCif">
                                    <option value="3620194" selected="selected">Search By Name</option>
                                </select>
                            </div>
                        </div>
                    </div>
                }

            </div>
        </div>
    </div>
</div>
@section scripts
{
    @if (!string.IsNullOrEmpty(Request.QueryString["cif"]))
    {
        if (Model.Customer.custToiInfo != null)
        {
            <!-- ECharts -->
            <script src="~/Scripts/vendors/echarts/dist/echarts.min.js"></script>
            <!-- bootstrap-daterangepicker -->
            <script src="~/scripts/datepicker/moment/moment.min.js"></script>
            <script src="~/scripts/datepicker/datepicker/daterangepicker.js"></script>
            //bar chart
            <script>
                var theme = {
                    color: ['#26B99A', '#34495E', '#BDC3C7', '#3498DB', '#9B59B6', '#8abb6f', '#759c6a', '#bfd3b7'],
                    title: { itemGap: 8, textStyle: { fontWeight: 'normal', color: '#408829' } },
                    dataRange: { color: ['#1f610a', '#97b58d'] },
                    toolbox: { color: ['#408829', '#408829', '#408829', '#408829'] },
                    tooltip: { backgroundColor: 'rgba(0,0,0,0.5)', axisPointer: { type: 'line', lineStyle: { color: '#408829', type: 'dashed' }, crossStyle: { color: '#408829' }, shadowStyle: { color: 'rgba(200,200,200,0.3)' } } },
                    dataZoom: { dataBackgroundColor: '#eee', fillerColor: 'rgba(64,136,41,0.2)', handleColor: '#408829' },
                    grid: { borderWidth: 0 },
                    categoryAxis: { axisLine: { lineStyle: { color: '#408829' } }, splitLine: { lineStyle: { color: ['#eee'] } } },
                    valueAxis: { axisLine: { lineStyle: { color: '#408829' } }, splitArea: { show: true, areaStyle: { color: ['rgba(250,250,250,0.1)', 'rgba(200,200,200,0.1)'] } }, splitLine: { lineStyle: { color: ['#eee'] } } },
                    timeline: { lineStyle: { color: '#408829' }, controlStyle: { normal: { color: '#408829' }, emphasis: { color: '#408829' } } },
                    k: { itemStyle: { normal: { color: '#68a54a', color0: '#a9cba2', lineStyle: { width: 1, color: '#408829', color0: '#86b379' } } } },
                    map: { itemStyle: { normal: { areaStyle: { color: '#ddd' }, label: { textStyle: { color: '#c12e34' } } }, emphasis: { areaStyle: { color: '#99d2dd' }, label: { textStyle: { color: '#c12e34' } } } } },
                    force: { itemStyle: { normal: { linkStyle: { strokeColor: '#408829' } } } },
                    chord: { padding: 4, itemStyle: { normal: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' }, chordStyle: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' } } }, emphasis: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' }, chordStyle: { lineStyle: { width: 1, color: 'rgba(128, 128, 128, 0.5)' } } } } },
                    gauge: { startAngle: 225, endAngle: -45, axisLine: { show: true, lineStyle: { color: [[0.2, '#86b379'], [0.8, '#68a54a'], [1, '#408829']], width: 8 } }, axisTick: { splitNumber: 10, length: 12, lineStyle: { color: 'auto' } }, axisLabel: { textStyle: { color: 'auto' } }, splitLine: { length: 18, lineStyle: { color: 'auto' } }, pointer: { length: '90%', color: 'auto' }, title: { textStyle: { color: '#333' } }, detail: { textStyle: { color: 'auto' } } },
                    textStyle: { fontFamily: 'Arial, Verdana, sans-serif' }
                };

                var echartBarLine = echarts.init(document.getElementById('toi_graph_bar'), theme);

                echartBarLine.setOption({
                    title: {
                        x: 'center',
                        y: 'top',
                        padding: [0, 0, 20, 0],
                        text: '',
                        textStyle: {
                            fontSize: 15,
                            fontWeight: 'normal'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            saveAsImage: {
                                show: false,
                                title: 'Save'
                            }
                        }
                    },
                    calculable: true,
                    legend: {
                        data: ['TOI', 'TOI/DNBQ'],
                        y: 'bottom'
                    },
                    xAxis: [{
                        type: 'category',
                        data: ['@Model.Customer.custToiInfo.Month.AddMonths(-11).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-10).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-9).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-8).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-7).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-6).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-5).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-4).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-3).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-2).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.AddMonths(-1).ToString("MM/yyyy")',
                                '@Model.Customer.custToiInfo.Month.ToString("MM/yyyy")']
                    }],
                    yAxis: [{
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: '{value}'
                        },
                        axisLabel: {
                        }
                    }, {
                        type: 'value',
                        name: '',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }],
                    series: [{
                        name: 'TOI',
                        type: 'bar',
                        data: [@Model.Customer.custToiInfo.Month1,
                                @Model.Customer.custToiInfo.Month2,
                                @Model.Customer.custToiInfo.Month3,
                                @Model.Customer.custToiInfo.Month4,
                                @Model.Customer.custToiInfo.Month5,
                                @Model.Customer.custToiInfo.Month6,
                                @Model.Customer.custToiInfo.Month7,
                                @Model.Customer.custToiInfo.Month8,
                                @Model.Customer.custToiInfo.Month9,
                                @Model.Customer.custToiInfo.Month10,
                                @Model.Customer.custToiInfo.Month11,
                                @Model.Customer.custToiInfo.Month12],
                    }, {
                        name: 'TOI/DNBQ',
                        type: 'line',
                        yAxisIndex: 1,
                        data: [@Model.Customer.custToiAvgInfo.Month1,
                                @Model.Customer.custToiAvgInfo.Month2,
                                @Model.Customer.custToiAvgInfo.Month3,
                                @Model.Customer.custToiAvgInfo.Month4,
                                @Model.Customer.custToiAvgInfo.Month5,
                                @Model.Customer.custToiAvgInfo.Month6,
                                @Model.Customer.custToiAvgInfo.Month7,
                                @Model.Customer.custToiAvgInfo.Month8,
                                @Model.Customer.custToiAvgInfo.Month9,
                                @Model.Customer.custToiAvgInfo.Month10,
                                @Model.Customer.custToiAvgInfo.Month11,
                                @Model.Customer.custToiAvgInfo.Month12]
                    }]
                });
                $MENU_TOGGLE.on('click', function () {
                    $(window).resize();
                });
            </script>
        }
    }
    else
    {
        <script type="text/javascript">
            $("#custCif").select2({
                ajax: {
                    url: "@Url.Action("GetListCustomer", "CustomerManager")",
                    dataType: 'json',
                    type: "POST",
                    delay: 250,
                    data: function (params) {
                        return {
                            searchText: params.term, // search term
                            page: params.page
                        };
                    },
                    processResults: function (data, params) {
                        params.page = params.page || 1;
                        return {
                            results: data,
                            pagination: {
                            }
                        };
                    },
                    cache: true
                },
                placeholder: "Search By Name",
                allowClear: true,
                escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
                minimumInputLength: 1,
                templateResult: formatRepo, // omitted for brevity, see the source of this page
                templateSelection: formatRepoSelection // omitted for brevity, see the source of this page,
            });

            $("#custCif").val(null).trigger("change");
            function formatRepo(repo) {
                if (repo.loading) return repo.text;

                var markup = "<div class='select2-result-repository clearfix'>" +
                  "<div class='select2-result-repository__meta'>" +
                    "<div class='select2-result-repository__title'>" + repo.id + "</div>";

                markup += "<div class='select2-result-repository__description'>" + repo.custName + "</div>";

                markup += "<div class='select2-result-repository__statistics'>" +
                  "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.legalId + "</div>" +
                "</div>" +
                "</div></div>";

                return markup;
            }
            var initSelection = function (elem, cb) {
                console.log(elem)
                return elem
            }
            function formatRepoSelection(repo) {
                if (repo.text != null && repo.text != 'Search By Name') {
                    window.location.href = '/CustomerDetail/Index?cif=' + repo.id;
                }
                return repo.text;
            }

        </script>

    }
}
